<template>
  <el-dialog v-draggable class="dialog-container" :title="dialogTitle" :visible.sync="dialogVisible" :close-on-click-modal="false" width="50vw">
    <div class="title-box">
      <div class="title">
        <div class="left-line"></div>
        <div class="center-title">{{ dialogSubTitle }}</div>
        <div class="right-line"></div>
      </div>
    </div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="区域名称：" prop="zoneName">
        <el-input v-if="dialogType != 2" v-model="ruleForm.zoneName"></el-input>
        <span v-else>{{ ruleForm.zoneName }}</span>
      </el-form-item>
      <el-form-item v-if="dialogType == 1" label="上级区域：" prop="name">
        <el-input v-if="dialogType != 2" v-model="ruleForm.zoneFatherName" :disabled="true"></el-input>
        <span v-else>{{ ruleForm.zoneFatherName }}</span>
      </el-form-item>
      <!-- <el-form-item label="区域级别：" prop="name">
        <el-input v-if="dialogType != 2" v-model="ruleForm.areaLevel"></el-input>
        <span v-else>{{ ruleForm.areaLevel }}</span>
      </el-form-item> -->
      <el-form-item label="备注：" prop="desc">
        <el-input :autosize="{ minRows: 4, maxRows: 4 }" v-if="dialogType != 2" type="textarea"
          v-model="ruleForm.remake"></el-input>
        <span v-else>{{ ruleForm.remake }}</span>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleSave()" type="primary">保存</el-button>
      <el-button @click="dialogVisible = false">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addZon, updateZon } from "@/api/regionalSettings/index"
import { insertOpRecordRule } from "@/api/reportStatistics"

export default {
  props: {
    dialogVis: {
      type: Boolean,
      default: () => false
    },
    dialogType: {
      type: Number,
      default: () => 0
    },
    dialogTitle: {
      type: String,
      default: () => ""
    },
    dialogSubTitle: {
      type: String,
      default: () => ""
    },
    activeRow: {
      type: Object,
      default: () => {
      }
    }
  },


  data () {
    return {
      ruleForm: {
        zoneName: "",
        zoneLevel: "",
        remake: "",
        zoneFatherCode: "",
        zoneFatherName: ""
      },
      rules: {
        zoneName: [{
          required: true,
          message: "请输入区域名称",
          trigger: "blur"
        }],
      }
    }
  },
  created () {
  },
  mounted () {
    if (this.dialogType == 1) {
      this.ruleForm.zoneFatherName = this.activeRow.zoneName
      this.ruleForm.zoneFatherCode = this.activeRow.zoneCode
    } else {
      this.ruleForm = JSON.parse(JSON.stringify(this.activeRow))
    }
  },
  computed: {
    dialogVisible: {
      get: function () {
        return this.dialogVis
      },
      set: function (v) {
        this.$emit("update:dialogVis", v)
      }
    }
  },
  methods: {
    handleSave () {
      this.$refs.ruleForm.validate(async (v) => {
        if (v) {
          switch (this.dialogType) {
            case 0:
              this.addTopRegionsl()
              break
            case 1:
              this.addChildRegionsl()
              break
            case 3:
              this.updateZon()
              break
            default:
              break
          }
        }
      })

    },
    async addTopRegionsl () {
      const param = {
        zoneName: this.ruleForm.zoneName,
        zoneLevel: 1,
        remake: this.ruleForm.remake
      }
      const res = await addZon(param)
      if (res.status == "200") {
        this.$message({
          type: "success",
          message: res.message
        })
        this.dialogVisible = false
      }
    },
    async addChildRegionsl () {
      const param = {
        zoneName: this.ruleForm.zoneName,
        zoneFatherCode: this.ruleForm.zoneFatherCode,
        remake: this.ruleForm.remake
      }
      const res = await addZon(param)
      if (res.status == "200") {
        this.$message({
          type: "success",
          message: res.message
        })
        this.dialogVisible = false
      }
    },
    async updateZon () {
      const param = {
        id: this.activeRow.id,
        zoneName: this.ruleForm.zoneName,
        remake: this.ruleForm.remake
      }
      const res = await updateZon(param)
      if (res.status == "200") {
        this.$message({
          type: "success",
          message: res.message
        })
        this.dialogVisible = false
      }
    }
  }

}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  border-radius: 8px;

  .el-dialog__footer {
    text-align: center !important;
  }
}

::v-deep .el-dialog__header {
  border-radius: 8px 8px 0 0;
  background-color: #e6e6e6;
}

.ml-3 {
  margin-left: 12px;
}


.my_span {
  font-size: 16px;
}

.my_table {
  margin-top: 16px;
}

.dialog-foote {
  text-align: center;
}

.title-box {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;

  .title {
    width: 620px;
    // border: 1px solid red;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .left-line {
      height: 1px;
      width: 220px;
      background: #bebebe;
    }

    .center-title {
      font-weight: 400;
      font-size: 20px;
      color: #000000;
    }

    .right-line {
      height: 1px;
      width: 220px;
      background: #bebebe;
    }
  }
}
</style>
